<!-- 账号密码登录页面 -->
<template>
  <div class="container">
    <uni-nav-bar
      class="nav-bar"
      fixed="true"
      title="账号密码登录"
      status-bar="true"
      :border="false"
      left-icon="left"
      @clickLeft="back"
    />
    <!-- 表单 -->
    <div class="form">
      <div class="form-item">
        <text class="text">
          手机号码
        </text>
        <input
          v-model="formData.phone"
          class="input"
          type="text"
          placeholder="请输入手机号"
        >
      </div>
      <div class="form-item">
        <text class="text">
          密码
        </text>
        <input
          v-model="formData.password"
          class="input"
          type="password"
          placeholder="输入密码"
        >
      </div>
    </div>
    <!-- 注册按钮 -->
    <div
      class="login-btn"
      @click="login"
    >
      完成
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { requestLoginByPassword } from '@/api/api-user';
import { useUser } from '@/stores/user';
import { setToken } from '@/utils/local-data';
import { back } from '@/utils/navigate';
import { showToast } from '@/utils/tools';

const user = useUser();

// 表单数据
const formData = ref({
  phone: '',
  password: '',
});

/**
 * 登录
 */
const login = () => {
  // 检查手机号
  if (!/^1[3456789]\d{9}$/.test(formData.value.phone)) {
    showToast('手机号有误，请重新输入');
    return;
  }
  // 检查密码长度
  if (formData.value.phone.length < 4) {
    showToast('密码长度不足');
    return;
  }

  // 发送请求
  requestLoginByPassword(formData.value.phone, formData.value.password)
    .then((res: any) => {
      // 检查是否有token，如果没有，说明登录失败
      if (!res.data.token) {
        showToast('密码错误');
        return;
      }

      const resData: LoginByPasswordResDataInSuccess = res.data;
      // 保存token
      setToken(resData.token);
      user.getInfo();
      // 返回主页
      uni.switchTab({ url: '/pages/index' });
    })
    .catch((err: any) => {
      showToast('网络错误');
    });
};

</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template:
    'nav-bar' auto
    'form' 162px
    '.' 77px
    'register-btn' 42px
    '.' 1fr
    / 1fr;
  grid-gap: 15px;
  align-items: center;
  justify-items: center;

  .nav-bar {
    grid-area: nav-bar;
  }

  .form {
    grid-area: form;

    width: 358px;

    display: flex;
    flex-direction: column;
    align-items: center;

    .form-item {
      width: 100%;
      height: 54px;

      background: #fcf8f9;
      border-bottom: .5px solid #ccc;

      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:last-child {
        border-bottom: none;
      }

      .text {
        margin: 0 15px;

        font-size: 15px;
        color: #333;
      }

      .input {
        height: 100%;

        background: #fcf8f9;
        border: none;
        outline: none;
        flex: 1;

        font-size: 14px;
        color: #333;
      }
    }
  }

  .login-btn {
    grid-area: register-btn;

    width: 342px;
    height: 42px;

    background: #ff2459;
    border-radius: 4px;

    font-size: 16px;
    line-height: 42px;
    color: #fff;
    text-align: center;
  }

}
</style>
